<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Registration Form</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <h1>Registration Form</h1>
        <p>Please fill out this form with the required information</p>
        <form method="post" action="https://register-demo.freecodecamp.org">
            <fieldset>
                <label for="first_name">
                    Enter Your First Name: <input type="text" name="first_name" id="first_name">
                </label>
                <label for="last_name">
                    Enter Your Last Name: <input type="text" name="last_name" id="last_name">
                </label>
                <label for="email">
                    Enter Your Email: <input type="email" name="email" id="email">
                </label>
                <label for="password">
                    Create a New Password: <input type="password" name="password" id="password">
                </label>
            </fieldset>
            <fieldset>
                <!-- legend 标题 -->
                <legend>Account type (required)</legend>
                <!-- 单选框type为radio 
                    一个单选按钮组由具有相同 name 属性的单选按钮组成 
                    设置为行内样式 -->
                <label for="account-personal">
                    <input type="radio" name="account-type" id="account-personal" class="inline" checked> Personal
                </label>
                <label for="account-business">
                    <input type="radio" name="account-type" id="account-business" class="inline"> Business
                </label>
            </fieldset>
            <fieldset>
                <label for="file_upload">
                    Upload a profile picture: <input type="file" name="file_upload" id="file_upload" placeholder="请选择文件">
                </label>
                <label for="age">
                    Input your age (years): <input type="number" name="age" id="age" min="18" max="120">
                </label>
                <label for="referrer">
                    How did you hear about us? 
                    <select name="referrer" id="referrer">
                        <!-- 第一个value设置为空 -->
                        <option value="">(select one)</option>
                        <option value="1">News</option>
                        <option value="2">Youtube</option>
                        <option value="3">Forum</option>
                        <option value="4">other</option>
                    </select>
                </label>
                <label for="bio">
                    Provide a bio: <textarea name="bio" id="bio" rows="3" cols="20" placeholder="请输入内容"></textarea>
                </label>
            </fieldset>
            <label for="terms">
                <!-- 勾选框设置为行内样式 -->
                <input type="checkbox" name="terms" id="terms" class="inline" required>  I accept the <a href="#">terms and conditions</a>
            </label>
            <!-- <button type="submit">Submit</button> -->
             <input type="submit" value="Submit">
        </form>
    </body>
</html>